import React, { Component } from "react";
import { Button } from "reactstrap";

class ControlPanel extends Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <div className="ControlPanel" style={{ width: "100%" }}>
                <Button color="info" style={{ borderRadius: 10, position: "absolute", left: "20%", top: "60%" }}>
                    Select
                    </Button>
                <Button color="info" style={{ borderRadius: 10, position: "absolute", left: "60%", top: "60%" }}>
                    Enter
                    </Button>
                <Button color="info" size="lg"
                    style={{ borderRadius: 50, position: "absolute", left: "30%", top: "70%" }}>
                    U
                    </Button>

                <Button color="info" size="lg"
                    style={{ borderRadius: 50, position: "absolute", left: "15%", top: "78%" }}
                    onClick={() => this.togLeft()}
                >
                    L
                    </Button>
                <Button color="info" size="lg"
                    style={{ borderRadius: 50, position: "absolute", left: "45%", top: "78%" }}>
                    R
                    </Button>
                <Button color="info" size="lg"
                    style={{ borderRadius: 50, position: "absolute", left: "30%", top: "86%" }}>
                    D
                    </Button>
                <Button color="info" size="lg"
                    style={{ borderRadius: 50, position: "absolute", left: "65%", top: "85%" }}>
                    A
                    </Button>
                <Button color="info" size="lg"
                    style={{ borderRadius: 50, position: "absolute", left: "75%", top: "75%" }}>
                    B
                    </Button>
            </div >
        )
    }

    togLeft() {
        console.log("click left")
    }
}

export default ControlPanel;
